<template>
	<view class="page">
		<image class="login_bg" src="https://www.shlxkj.info:10010/艾瑞测前端静态资源/background.png" mode="aspectFit" />
		<div class="content" :style="{'padding-top':statusBarHeight+'rpx'}">
			<!-- <view class="welcome">欢迎使用艾瑞测！</view>
			<view class="sub-title">登录后更精彩，美好即将开始！</view> -->
			<p class="p1">欢迎使用个人健康档案</p>
			<image class="login_bg2" src="../../static/img/login_bg2.png" mode=""></image>
			<!-- <button class="login" type="primary" open-type="getUserInfo" :disabled="authLoading"
				@getuserinfo="getUserInfo">登录</button> -->
			<button class="login" type="primary" open-type="getUserInfo" :disabled="authLoading"
				@click="getUserInfo">一键登录</button>
			<view class="agree-wrap agree">
				<view style="display: flex;align-items: center;" @click="agreeChange">
					<image class="radio"
						:src="agree === '0' ? '/static/img/checkbox.png' : '/static/img/checkbox-active.png'"
						mode="aspectFit" />
					<text class="" style="color: #fff;">同意</text>
				</view>
				<text class="link"   @click="goAgreement">《用户协议》</text> <span style="color: #fff;">与</span> <text class="link"
					@click="goPrivacy">《隐私政策》</text>
			</view>

			<!-- 	<view class="agree-wrap agree">
				<view style="display: flex;align-items: center;" @click="agreeGps">
					<image class="radio" :src="gps === false ? '/static/img/checkbox.png' : '/static/img/checkbox-active.png'"
						mode="aspectFit" />
					<text class="">同意</text>
				</view>
				<text class="link"> 授权定位 </text>与<text class="link" @click="goConsent">《知情同意书》</text>
			</view> -->
		</div>
		<copyright />
		<uni-popup ref="popup" type="bottom" class="popup-height" background-color="#fff">
			<view class="register-popup">
				<view class="tips">
					温馨提示
				</view>
				<view class="allow-wrap">
					<view class="no-register">
						检测到您还未注册账号
					</view>
					<view class="allow">
						为了方便我们与您联系，请允许我们获取您的手机号码
					</view>
				</view>
				<view class="btn-wrap">
					<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
						type="primary">手机号快捷登录</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="agreement" type="center" style="border-radius: 26rpx;">
			<view class="agreement-height">
				<image class="agree-bg" src="/static/img/agree-box.png" mode="widthFix"></image>
				<view class="login-content">
					<mp-html :content="content" />
					<view class="agreement-btn-wrap">
						<button class="refuse-btn" @click="onRefuse">拒绝</button>

						<button id="agree-btn" class="ok-btn" @click="handleAgreePrivacyAuthorization"
							open-type="agreePrivacyAuthorization">同意并继续</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Copyright from '@/components/copyright/index.vue'
	import {
		getDictionaryByType,
		Shipment,
		ConvertCoordinate
	} from '@/utils/api.js'
	import MpHtml from '@/components/mp-html/mp-html'
	export default {
		name: 'Login',
		components: {
			Copyright,
			MpHtml
		},
		data() {
			return {
				gps: false,
				authLoading: false,
				authPhoneLoading: false,
				showComplete: false,
				isNeedScan: false,
				agree: '0',
				content: '',
				navHeight: '',
				statusBarHeight: '',
			}
		},
		onLoad(op) {
			console.log(op)
			let {
				statusBarHeight,
				system
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			this.getData(false)
			if (op.scan && op.scan === '1') {
				console.log(op)
				this.isNeedScan = true
			} else {
				this.isNeedScan = false
			}

			// wx.getPrivacySetting({
			//       success: res => {
			//         console.log(res) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
			//         if (res.needAuthorization) {
			//           // 需要弹出隐私协议
			// 		  console.log('需要弹出隐私协议');
			//        this.getData(true)
			//        	this.$refs.agreement.open('center')
			//         } else {
			//           // 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
			// 		  console.log('用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口');
			//         }
			//       },
			//       // fail: () => {},
			//       // complete() => {}
			//     })
		},
		methods: {
			async getData(tag) {
				if (tag) {
					uni.showLoading({
						title: 'loading'
					});
				}
				const res = await getDictionaryByType({
					Type: 'UserAgreement'
				})
				if (res.Code === 200) {
					this.content = decodeURIComponent(res.Data[0].Value).replace(/\+style/g, ' style')
					if (tag) {
						uni.hideLoading()
					}
				}
			},
			open() {
				this.$refs.popup.open('top')
			},
			close() {
				this.$refs.popup.close()
			},
			onScan() {
				uni.scanCode({
					success: async (res) => {
						if (res.result && res.result.includes('mac_id')) {
							const params = res.result.split('?')[1]
							const mac_id = params.split('=')[1]
							const {
								Phone
							} = this.$store.state.vx_u_info
							try {
								const response = await Shipment({
									Phone,
									mac_id
								})
								console.log(response)
								if (response.Code === 200) {
									uni.showToast({
										title: '出货成功',
										icon: 'success'
									})
								} else {
									uni.showToast({
										title: response.Message || '请稍后再尝试',
										icon: 'none'
									})
								}
								uni.navigateTo({
									url: '/pages/welcome/index'
								})
							} catch (error) {
								console.log(error)
							}
						} else {
							uni.showModal({
								title: '提示',
								content: '请扫描正确的二维码',
								success: (res) => {
									if (res.confirm) {
										this.onScan()
									} else if (res.cancel) {
										uni.navigateTo({
											url: '/pages/welcome/index'
										})
									}
								}
							})
						}
					}
				})
			},
			getUserInfo(e) {
				// console.log('111');
				if (this.agree === '0') {
					uni.showToast({
						title: '请先同意用户协议和隐私政策',
						icon: 'none'
					})
					return
				}
				// // if (this.gps === false) {
				// // 	uni.showToast({
				// // 		title: '请同意定位和知情同意书',
				// // 		icon: 'none'
				// // 	})
				// // 	return
				// // }
				this.authLoading = true
				console.log(e.userInfo || e.target.userInfo)
				this.$store.commit('$uStore', {
					name: 'vx_t_u_info',
					value: e.userInfo || e.target.userInfo
				})
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res, 'uni,login')
						if (res.code) {
							this.$store.dispatch('$dLogin', res.code).then(res => {
								if (res.type === false) {
									this.$refs.popup.open('bottom')
								} else if (res.type === true) {
									if (this.isNeedScan) {
										this.onScan()
									} else {
						
										uni.reLaunch({
											url: '/pages/Healthrecords/index'
										})
									}
								}
							})
						}
					}
				})
			},
			getUserInfoPhone(e) {
				this.authPhoneLoading = true
				console.log(e.userInfo || e.target.userInfo)
				this.$store.commit('$uStore', {
					name: 'vx_t_u_info',
					value: e.userInfo || e.target.userInfo
				})
				uni.navigateTo({
					url: '/pages/phone-login/index'
				})
			},
			async getPhoneNumber(e) {
				let obj = e.detail || e
				console.log(e, 'getphonenumber')
				if (obj.errMsg === 'getPhoneNumber:ok') {
					this.$store.dispatch('$dGetPhone', obj).then(data => {
						this.$store.dispatch('$dRegister', data).then(res => {
							if (res.type === false) {
								uni.showToast({
									title: '注册失败~'
								})
							} else if (res.type === true) {
								if (this.isNeedScan) {
									this.onScan()
								} else {
									uni.reLaunch({
										url: '/pages/Healthrecords/index'
									})
								}
							}
						})
					})
				} else {
					uni.showToast({
						title: '您拒绝了授权~,注册失败~'
					})
				}
			},
			onClose() {
				this.showComplete = false
				this.authLoading = false
			},
			async agreeChange() {
				console.log(this.agree)
				if (this.agree === '0') {
					if (!this.content) {
						await this.getData(true)
					} else {
						this.$refs.agreement.open('center')
					}
				}
			},
			async agreeGps() {
				console.log(this.gps)
				if (this.gps === false) {
					console.log('当前未授权定位');
					await this.getLocation(true)
				}
			},
			goAgreement() {
				uni.navigateTo({
					url: '/page_user/agreement/index'
				})
			},
			goPrivacy() {
				uni.navigateTo({
					url: '/page_user/privacy/index'
				})
			},
			goConsent() {
				uni.navigateTo({
					url: '/page_user/consent/index'
				})
			},
			handleAgreePrivacyAuthorization() {

				this.$refs.agreement.close()
				this.agree = '1'
				console.log('用户点击同意');
				wx.getPrivacySetting({
					success: res => {
						console.log(
							res
						) // 返回结果为: res = { needAuthorization: true/false, privacyContractName: '《xxx隐私保护指引》' }
						if (res.needAuthorization) {
							// 需要弹出隐私协议
							console.log('需要弹出隐私协议');
							this.getData(true)
							this.$refs.agreement.open('center')
						} else {
							// 用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口
							console.log('用户已经同意过隐私协议，所以不需要再弹出隐私协议，也能调用隐私接口');
						}
					},
					// fail: () => {},
					// complete() => {}
				})

			},
			onRefuse() {

				this.$refs.agreement.close()
				this.agree = '0'
			},
			getLocation(tag) {
				uni.getLocation({
					type: 'wgs84',
					success: async (res) => {
						//res.longitude,res.latitude分别为当前经度，纬度
						const response = await ConvertCoordinate({
							Locations: [res.longitude, res.latitude].join(',')
						})
						console.log(response.Data.regeocode)
						if (response.Code === 200) {
							const {
								province,
								city,
								district
							} = response.Data.regeocode.addressComponent
							const address = response.Data.regeocode.formatted_address
							this.$store.commit('$uStore', {
								name: 'vx_city',
								value: {
									province,
									city,
									district,
									address
								}
							})
							this.gps = true
							// if (tag) {
							//   uni.navigateTo({
							//     url: '/pages/login/index'
							//   })
							// }
						}
					},
					fail: (err) => {
						console.log(err)
						this.gps = false
						uni.showModal({
							title: '提示',
							content: '使用本设备时，请开启手机定位！',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									console.log('用户点击确定');
								}
							}
						});
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100vw;
		height: 100vh;
		// background-image: url('../../static/img/login_bg.png');
		// background-size: cover;
		position: relative;
		overflow: hidden;

		.login_bg {
			width: 100%;
			height: 100%;
		}

		.login_bg2 {
			position: absolute;
			width: 149rpx;
			height: 182rpx;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.p1 {
			width: 500rpx;
			position: absolute;
			text-align: center;
			top: 45%;
			left: 50%;
			transform: translate(-50%, -50%);
			font-size: 20px;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 36px;
			letter-spacing: 1px;
		}

		.nav-style {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			z-index: 1000;
			display: flex;
			padding-left: 23rpx;
			align-items: center;

			.small-logo {
				width: 100rpx;
				height: 35rpx;
			}
		}

		.content {
			// margin-top: 203rpx;
			padding: 0 64rpx;
		}

		.welcome {
			// margin-top: 100rpx;
			font-size: 46rpx;
			font-weight: bold;
			color: #323232;
			line-height: 46rpx;
		}

		.sub-title {
			// margin-top: 30rpx;
			font-size: 27rpx;
			color: #666666;
			line-height: 60rpx;
		}

		.logo-wrap {
			width: 436rpx;
			height: 168rpx;
			// margin: 600rpx auto 0;

			.logo {
				width: 436rpx;
				height: 168rpx;
			}

		}

		.login {
			position: absolute;
			top: 70%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 483rpx;
			height: 85rpx;
			background: #FFFFFF;
			border-radius: 46rpx;
			font-size: 31rpx;
			// font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			color: #0560B3;
			line-height: 85rpx;
		}

		.phone-login {
			margin-top: 30rpx;
			border-radius: 46rpx;
			color: #aaaaaa;
			border: 1rpx solid #aaaaaa;
		}

		.agree {
			color: #A7A6A6;
			font-size: 27rpx;
			font-weight: 400;

			.link {
				color: #2955CC
			}
		}
	}

	.popup-height {
		height: 40vh;
	}

	.register-popup {
		height: 40vh;
		padding: 30rpx;

		.tips {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}

		.btn-wrap {
			margin: 30rpx auto;
			display: flex;
			justify-content: center;
		}

		.phone-btn {
			margin-top: 50rpx;
		}

		.no-register {
			font-size: 28rpx;
			color: #3b4144;
		}

		.allow-wrap {
			margin-top: 60rpx;
			text-align: center;
		}

		.allow {
			font-size: 28rpx;
			margin-top: 20rpx;
			color: #909399;
		}
	}

	.agree-wrap {
		width: 470rpx;
		margin: 50rpx auto 0;
		display: flex;
		align-items: center;
		position: absolute;
		top: 75%;
		left: 50%;
		transform: translate(-50%, -50%);

		.radio {
			width: 27rpx;
			height: 27rpx;
			margin-right: 10rpx;
		}
	}

	.agreement-height {
		width: 615rpx;
		height: 70vh;
		margin: 0 auto;
		border-radius: 26rpx;
		background-color: #ffffff;
		position: relative;

		.agree-bg {
			width: 615rpx;
			position: absolute;
			z-index: 0;
		}

		.login-content {
			width: 515rpx;
			position: absolute;
			padding: 60rpx 50rpx 0;
			height: calc(100% - 100rpx);
			overflow-y: scroll;
		}

		.agreement-btn-wrap {
			background-color: #ffffff;
			padding-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.ok-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				background: #1E64E1;
				border-radius: 15rpx;
				text-align: center;
				font-size: 31rpx;
				font-weight: 400;
				color: #FFFFFF;
			}

			.refuse-btn {
				width: 250rpx;
				height: 85rpx;
				line-height: 85rpx;
				font-size: 31rpx;
				font-weight: 400;
				color: #333333;
				background: #EBEBED;
				text-align: center;
				border-radius: 15rpx;
			}
		}
	}
</style>